<%-- 
    Document   : userSearch
    Created on : 22/07/2011, 9:50:37 AM
    Author     : Mamdouh Alharbi - S4194298
--%>

<style>
    .error { color: red; }
</style>  

<%@ include file="header.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div id="content-container1">
    <div id="content">
        <!-- Content goes here -->
        <form:form method="post" commandName="usersearch">
            <table width="70%" bgcolor="f8f8ff" border="0" cellspacing="0" cellpadding="5">

                <tr>
                    <td width="20%">
                        Search By
                    </td><td align="left" width="20%">
                        <form:radiobutton path="searchtype" value="location" id="location" onclick="showMap()" label="Location"/>
                    </td>
                    <td align="left" width="20%">
                        <form:radiobutton path="searchtype" value="organisation" id="organisation" onclick="hideMap()" label="Organization"/>
                    </td>
                <tr id="search" hidden="true">                    
                    <td align="right" width="20%">Keyword:</td>
                    <td width="20%">
                        <form:input path="searchword"/>
                    </td>
                    <td width="60%">
                        <form:errors path="searchword" cssClass="error"/>
                    </td>
                </tr>
            </table>


            <form:input path="lat" id="lat" value="-27.5" hidden="true"/> 
            <form:input path="lon" id="lon" value="153.01" hidden="true"/>  
            <!--TODO fix this then make it submit properally-->          
            <div id="map" style="width: 650px; height: 250px"></div>

            <!-- add your map api key here -->
            <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key="></script>
            <script type="text/javascript">
                function returnCoords(){                                     
                    var lon = document.getElementById("lon").value;
                    var lat = document.getElementById("lat").value;                      
                    window.location = "./showPoll.html?pid=<c:out value="${pid}"/>&lon="+lon+"&lat="+lat;                                           
                }                
                function showMap(){                
                    document.getElementById("map").hidden = false
                    document.getElementById("search").hidden = true
                }
                function hideMap(){                
                    document.getElementById("map").hidden = true
                    document.getElementById("search").hidden = false
                }
            
                if (GBrowserIsCompatible()) {
                    // create map and add controls
                    var map = new GMap2(document.getElementById("map"));
                    var customUI = map.getDefaultUI();
                    customUI.controls.scalecontrol = false;
                    customUI.controls
                    map.setUI(customUI);
                    map.removeMapType(G_HYBRID_MAP);
                    
                    // set centre point of map
                    var centrePoint = new GLatLng('-27.5', '153.01');
                    map.setCenter(centrePoint, 14);	
                    
                    //enable the search bars
                    map.enableGoogleBar()
                    
                    // add a draggable marker
                    var marker = new GMarker(centrePoint, {draggable: true});
                    
                    map.addOverlay(marker);
                    
                    // add a drag listener to the map
                    GEvent.addListener(marker, "dragend", function() {
                        var point = marker.getPoint();
                        map.panTo(point);
                        document.getElementById("lat").value = point.lat();
                        document.getElementById("lon").value = point.lng();
                    });                  
                }
                if(document.getElementById("location").checked==true) {
                    showMap()
                } else
                    hideMap()
            </script>
            <br>
            <input type="submit" align="center" value="Search">
        </form:form>
    </div>
</div>		

<%@ include file="footer.jsp" %>